<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
    <div id="process" style="width: 200px;height: 200px;transform: translateY(-20px)" />
    <div class="processTitle">{{processData.title}}</div>
  </div>

</template>

<script>
let echarts = require('echarts')
export default {
name: "index",
props:['processData'],
  data(){
  return {

  }
  },

  methods:{
    init(){
      let options={
          title: [{
            text: this.processData.process,
            x: 'center',
            top: '45%',
            textStyle: {
              fontSize: '20',
              color: '#FFFFFF',
              fontFamily: 'DINAlternate-Bold, DINAlternate',
              foontWeight: '600',
            },
          }],
          polar: {
            radius: ['42%', '52%'],
            center: ['50%', '50%'],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [{
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 90,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(66, 66, 66, .3)',
            },
            data: [this.processData.num],
            coordinateSystem: 'polar',

            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#16CEB9',
                },
                  {
                    offset: 1,
                    color: '#6648FF',
                  },
                ]),
              },
            },
          },
            {
              name: '',
              type: 'pie',
              startAngle: 80,
              radius: ['56%'],
              hoverAnimation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: 'rgba(66, 66, 66, .1)',
                borderWidth: 1,
                borderColor: '#5269EE',
              },
              data: [100],
            },
            {
              name: '',
              type: 'pie',
              startAngle: 80,
              radius: ['38%'],
              hoverAnimation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: 'rgba(66, 66, 66, .1)',
                borderWidth: 1,
                borderColor: '#5269EE',
              },
              data: [100],
            }
          ],
        }
      let linearBarDom = echarts.getInstanceByDom(document.getElementById('process'))
      if(linearBarDom == null){
        linearBarDom = echarts.init(document.getElementById('process'))
      }

      linearBarDom.setOption(options)
    }
  },
  watch: {
    processData: {
      handler (val) {
        this.init()
      },
      deep: true
    }
  },
  mounted () {
    this.init()
  },

}
</script>

<style scoped lang="scss">
.processTitle{
  position: absolute;
  top: 85%;
  color: #0b525b;
  animation: animation ease-in-out 7s infinite;
  @keyframes animation {
    0% {
      color: #146d0a;
    }
    50% {
      color: #6b08c3;
    }
    75% {
      color: #0a636d;
    }
    100% {
      color: #146d0a;
    }
  }
}
</style>
